<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quotes</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="app">
        
        <div id="content" v-html="content"></div>
        <div id="button" @click="next">NEXT</div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type=text/javascript>
        const vue = new Vue({
        el:'#app',
        data:{
        data : null,
                },
                methods: {
        next() {
            this.data = getData();
        }
                },
                computed:{
        content:function(){
            return this.data[Math.ceil(Math.random() * this.data.length) - 1];         
        }
                },
                
                created() { 
        this.next();
                },
                
            });
            function getData(){
                return [
                    "不畏将来，不念过往",
                    "生活有时候就像马尔科夫过程，凡是过去的都成了序章，真正决定未来的是每一个当下",
                    "待人友善是修养 独来独往是性格",
                    "阅己，悦己，越己",
                    "生命太短暂，不要去做根本没人想要的东西",
                    "两列波在相遇后相互穿过，仍然保持各自的运动状态继续传播，彼此之间好像未曾相遇",
                    "或许有一天，你会拍打着教科书说：编者还欠费功夫",
                    "太空浩瀚，岁月悠长，我始终乐于和她分享同一颗行星和同一个时代",
                    "质子在许许多多个夏天后死去",
                    "改变或者离开，需要的可不仅仅是那一点儿聪明",
                    "我们曾经仰望着浩瀚的星空 思考自身的存在",
                    "人生不可逆，我亦是过程；独立且自由，孤独且执着",
                    "自我教育是唯一的教育形式",
                    "这世上只有一种成功 就是能够用自己喜欢的方式度过自己的一生",
                    
                ];
            }
        </script>
</body>
</html>